<template>
  <div id="home">
    <!-- line-width 下划线的宽度 -->
    <tab :line-width="2" :custom-bar-width="getBarWidth" bar-active-color="#10c5b6">
      <tab-item selected @on-item-click="onItemClick">圈子</tab-item>
      <tab-item @on-item-click="onItemClick">话题</tab-item>
    </tab>
    <div id="home-content" class="content-block content content-top">
      <div id="tab1" ref="tab1">
        <div class="list-block infinite-list">
          <group>
            <router-link to="/home/writePoint" class="h-write-point">
              <cell title="每天写写更健康" @click.native="onClick" style="">
                <icon style="float:right;color: #10c5b6" name="pencil-square-o" scale="1.5"></icon>
              </cell>
            </router-link>
          </group>
          
          <div class="list-block media-list">
            <ul>
              <li v-for="point in points" style="border-bottom: dotted 1px rgb(16, 197, 182);">
                  <div class="item-content">
                  <div class="item-media"><img src="http://ww2.sinaimg.cn/mw690/6f767da7jw1eijbwtal71j20l30v9djn.jpg" style='width: 2.2rem;height: 2.2rem;'></div>
                  <div class="item-inner">
                      <div class="userProfile">
                          <div class="item-title-row">
                          <div class="item-title">飞雷</div>
                          </div>
                          <div class="item-subtitle" style="font-size: 0.75rem;">2小时前</div>
                      </div>
                      <div class="userSchool">青岛科技大学</div>
                  </div>
                  </div>
                  <div class="">
                      <div class="card-content">
                        <div class="card-content-inner">{{point.content}}</div>
                        <div v-if="point.img != ''" class="card-content">
                          <img style="height: 150px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498367451471&di=942d2cfc278a85736640498af85b25c9&imgtype=0&src=http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz%2FCxZ8gu2EQibVthRLT2ZiaeWYxic0O86HYx8MRaFPpUHmO5EWGuyABPrLPs6W3BUEP2dXNz42qicL74VhSeLeV70AsA%2F640" width="100%">
                        </div>
                      </div>
                  </div>
                  <div style="height: 30px; margin-top:0">
                    <div slot="content" class="card-padding" style="text-align:right;hight:20px">
                      <router-link to="/home/comments" class="h-write-point">
                        <span style="font-size:18px;color: rgb(16, 197, 182);margin-right: 30px;height: 20px;display: block;float: right;">
                          2
                        </span>
                        <span @click="clickComment" style="margin-right: 5px;height: 20px;display: block;float: right;">
                          <icon style="color: #10c5b6" name="comments-o" scale="1.5"></icon>
                        </span>
                      </router-link>
                      <span @click="clickLike" style="font-size:18px;color: rgb(16, 197, 182);margin-right: 30px;height: 20px;display: block;float: right;">
                        34
                      </span>
                      <span @click="clickLike" style="margin-right: 5px;height: 20px;display: block;float: right;">
                        <icon style="color: #10c5b6" name="thumbs-o-up" scale="1.5"></icon>
                      </span>
                    </div>
                  </div>
              </li>
            </ul>
          </div>

        </div>

      </div>
      <div id="tab2" ref="tab2" style="display:none">
        <div>
          <span @click="">添加</span>
          <span style="float:right;" @click="">删除</span>
        </div>
        <div class="list-block infinite-list">
          <div style="margin: 10px;" v-for="item in topics">
            <masker style="border-radius: 2px;">
              <div class="m-img" :style="{backgroundImage: 'url(' + item.img + ')'}"></div>
              <div slot="content" class="m-title">
                <h3>#{{item.title}}#</h3?
                <br/>
                <p>期待你的观点</p>
                <p class="follow">关注</p>
                <span class="m-time">2016-03-18</span>
              </div>
            </masker>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

let points = [
  {
    content: '坚持自己那一亩三分地',
    img: ''
  },
  {
    content: '博羸兄弟',
    img: ''
  },
  {
    content: '期待着诗一样远方',
    img: '/static/img/mbar1.jpg'
  }
]

let topics = [
  {
    title: '电车难题',
    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498365968040&di=4d4628e3c426f45b1c2d072cd6fb9013&imgtype=0&src=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F150116%2F139-150116141212.jpg'
  }, {
    title: '空地上的奶牛',
    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498366120004&di=c5003db59af6fd4484d7333cfaf84e90&imgtype=0&src=http%3A%2F%2Fimg15.3lian.com%2F2015%2Fh1%2F03%2Fd%2F111.jpg'
  }, {
    title: '定时炸弹',
    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498366147451&di=c8c57e263aa6ab00df23868250a45e97&imgtype=0&src=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F150907%2F139-150ZG14555.jpg'
  }, {
    title: '猴子和打字机',
    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498366565074&di=9828a244c07cd31d886f47c4004ab43a&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F56e7d3e413978.jpg'
  }, {
    title: '薛定谔的猫',
    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498366606822&di=1b8a978d3434101e7b7ff84cb4b460f6&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_0_3678557099D3935677457_23.jpg'
  }, {
    title: '缸中的大脑',
    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498366527588&di=7c1c623454573311757a8421f0d0050b&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Flvpics%2Fh%3D800%2Fsign%3D1f925bc2bd3eb1355bc7babb961fa8cb%2Faa18972bd40735fa795539939f510fb30f240876.jpg'
  }
]

import { Tab, TabItem, Panel, Masker, Cell, Group, Card } from 'vux'
import Icon from 'vue-awesome'
export default {
  components: {
    Tab,
    TabItem,
    Panel,
    Masker,
    Cell,
    Group,
    Icon,
    Card
  },
  mounted () {
    console.log('mounted')
    if (this.$router.history.current.path === '/home') {
      this.$router.push('home')
      console.log('路径是一个home')
    }
    for (let i = 0; i < 15; i++) {
      console.log('ready')
      this.circles.push({
        id: i,
        name: `demo${i + 1}`
      })
    }
    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest'},
      data: {
        name: 'wise',
        info: 'wrong'
      },
      method: 'post'
    }
    this.$ajax('market/api/cms/topics/query', config).then(function (response) {
      console.log(response)
    }).catch(function (error) {
      console.log(error)
    })
    this.topics = topics
    this.points = points
    console.log(this.$router)
    console.log(this.$router.history.current.path)
  },
  data () {
    return {
      index: 0,
      getBarWidth: function (index) {
        return (index + 1) * 22 + 'px'
      },
      circles: [],
      points: [],
      topics: []
    }
  },
  methods: {
    onItemClick (index) {
      console.log('on item click:', index)
      if (index === 1) {
        this.$refs.tab1.style.display = 'none'
        this.$refs.tab2.style.display = 'block'
      } else {
        this.$refs.tab1.style.display = 'block'
        this.$refs.tab2.style.display = 'none'
      }
    },
    onClick () {
      console.log('点击了写圈子方法')
      this.$ajax({
        method: 'post',
        url: 'weixin/getWxCode',
        data: {
          name: 'wise',
          info: 'wrong'
        }
      })
    },
    clickHeader () {
      console.log('点击了clickHeader')
    },
    clickItem () {
      console.log('点击了clickItem')
    },
    clickComment () {
      console.log('点击了clickComment')
    },
    clickLike () {
      console.log('点击了clickLike')
    },
    clickAddTopic () {
      console.log('点击了添加话题方法')
      this.$ajax({
        method: 'post',
        url: 'weixin/getWxCode',
        data: {
          name: 'wise',
          info: 'wrong'
        }
      })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

.box {
  padding: 15px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}

.vux-tab .vux-tab-item.vux-tab-selected{
    color: #10c5b6;
    border-bottom: 5px solid #10c5b6;
}

.vux-tab-bar-inner {
    display: block;
    background-color: #10c5b6 !important;
    margin: auto;
    height: 100%;
    -webkit-transition: width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    transition: width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
}
.m-img {
  padding-bottom: 33%;
  display: block;
  position: relative;
  max-width: 100%;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
  border-radius: 2px;
}

.m-title {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.m-time {
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
  display: inline-block;
  margin-top: 5px;
}

.list-block {
    margin: 0.75rem 0;
    font-size: 0.85rem;
}
.list-block ul {
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.list-block li {
    box-sizing: border-box;
    position: relative;
}
.list-block .item-content {
    box-sizing: border-box;
    padding-left: 0.75rem;
    min-height: 2.2rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.list-block.media-list .item-media {
    padding-top: 0.45rem;
    padding-bottom: 0.5rem;
}
.list-block .item-media {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-top: 0.35rem;
    padding-bottom: 0.4rem;
}
.list-block.media-list .item-media img {
    display: block;
}
.list-block.media-list .item-inner {
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.45rem;
    -webkit-align-self: stretch;
    align-self: stretch;
}

.list-block .item-media + .item-inner {
    margin-left: 0.75rem;
}

.list-block .item-inner {
    padding-right: 0.75rem;
    position: relative;
    width: 100%;
    padding-top: 0.4rem;
    padding-bottom: 0.35rem;
    min-height: 2.2rem;
    overflow: hidden;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.userProfile {
    float: left;
    line-height: 1.1rem;
    font-size: 0.75rem;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.list-block.media-list .item-title-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.list-block.media-list .item-title {
    font-weight: 500;
}
.list-block .item-subtitle {
    font-size: 0.75rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
}
.userSchool {
    line-height: 2.2rem;
    float: right;
    font-size: 0.75rem;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.card-content-inner{
  margin-left:10px;
}
.follow{
  color: #ff8989;
  border-color: #ff8989;
  border-radius: 4px;
  border: 1px solid;
  width: 80px;
  margin: 0 auto;
}
.h-write-point{
  color: #666;
}
</style>
